<template>
	<view class="giftVoucher">
		<n-loading></n-loading>
		<view class="topBox">
			<view class="bj"></view>
			<view class="pd32">
				<!-- 活动轮播 -->
				<view class="activitySwiper">
					<swiper class="swiper" @change="bannerChange" :autoplay="true">
						<swiper-item v-for="(item,index) of bannerList" :key="index">
							<view class="bannerImgBox" @tap="goBannerInfo(item.type,item.content)">
								<dh-image class="banner" :src="item.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
							</view>
						</swiper-item>
					</swiper>
					<view class="swiperDots">
						<view class="swiperDot" :class="{swiperDotActive:bCurrent==index}" v-for="(item,index) of bannerList" :key="index"></view>
					</view>
				</view>
			</view>
			<!-- 商家种类导航 -->
			<u-tabs :list="navList" :is-scroll="false" 
			:current="current" @change="navChange" 
			active-color="#FF5238" :bold="false"
			 inactive-color="#333" class="tabs"
			 font-size="32" height="88"></u-tabs>
			<!-- 筛选条件 -->
			<view class="screen">
				<view class="each" :class="{eachEd:sortVal==1}" @tap="screenChange(1)">精选</view>
				<view class="each" :class="{eachEd:sortVal==2}" @tap="screenChange(2)">距离最近</view>
				<view class="each" :class="{eachEd:sortVal==3}" @tap="screenChange(3)">最新</view>
				<!-- <u-icon name="arrow-down" color="#333" size="24"></u-icon> -->
			</view>
		</view>
		<!-- 列表 -->
		<view class="listBox" v-if="areadyState">
			<view class="nodata" v-if="voucherList.length==0">
				<image src="../../static/svgIcon/noCoupon.svg" mode=""></image>
				<view class="tips">暂无礼券~</view>
			</view>
			<view class="itemEach" v-for="(item,index) of voucherList" :key="index">
				<view class="itemLeft">
					<view class="leftBj" :style="{background: (index+1)%4==1?'#FF5238':((index+1)%4==2?'#631708':((index+1)%4==3?'#A0314B':'#F8BD55'))}">
						<view class="leftCont">
							<view class="leftTopBox ellipsis">
								<dh-image class="shopLogo" :src="item.logo" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
								<text :style="{color: (index+1)%4==1?'#FF5238':((index+1)%4==2?'#631708':((index+1)%4==3?'#A0314B':'#F8BD55'))}">{{item.name.substring(0,5)}}</text>
							</view>
							<view class="leftBottomBox">
								<view class="tips">{{item.condition.condition_type_name}}</view>
								<view class="cont">{{item.promotionCoupon.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="itemRight">
					<view class="cTit ellipsis2">{{item.promotionCoupon.describe}}</view>
					<view class="cont ellipsis">{{item.promotionCoupon.name}}</view>
					<view class="btnBox">
						<view class="btn" v-if="item.already==0" @tap="receiveCoupon(item.promotionCoupon.id)">免费领取</view>
						<view class="btn btn1" v-if="item.already==1">已经领取</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//活动轮播
				bannerList:null,
				// 活动轮播当前
				bCurrent:0,
				navList: [{
					name: '火锅'
				}, {
					name: '烧烤'
				}, {
					name: '夜宵'
				}, {
					name: '中餐'
				}],
				current: 0,
				// 排名
				sortVal:1,
				// 请求参数
				areadyState:null,
				isLoadMore:false,
				page: 1,
				pageSize: 10,
				voucherList:[],
				lat:0,//
				lon:0,//
			}
		},
		onLoad: function (option) {
			this.isGetLocation();
			this.getBanner();
		},
		onReachBottom() {
			if(!this.isLoadMore){
				this.getVoucherList()
			}
		},
		methods: {
			// 广告位banner
			getBanner(){
				this.apiget('/fun/advert-position/detail',{code:'mall_shop_promotion_banner'}).then(res =>{
					if(res.data.status == 200 ) {
						this.bannerList = res.data.data.advert;
					}
				})
			},
			// 获取定位
			getAuthorizeInfo(a="scope.userLocation"){  //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				var _this=this;
				uni.authorize({
					scope: a,
					success() { //1.1 允许授权
						_this.getLocationInfo();
					},
					fail(){    //1.2 拒绝授权
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			getLocationInfo(){  //2. 获取地理位置
				var _this=this;
				uni.getLocation({
					type: 'gcj02',
					success (res) {
						_this.lat = res.latitude;
						_this.lon = res.longitude;
						_this.getVoucherList();
					}
				});
			},
			isGetLocation(a="scope.userLocation"){ // 3. 检查当前是否已经授权访问scope属性，参考下截图
				var _this=this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting[a]) {  //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							_this.getAuthorizeInfo()
						}else{
							_this.getLocationInfo()
						}
					}
				});
			},
			getVoucherList() {
				this.apiget('/shop/store-front/search-coupon',{page:this.page,pageSize:this.pageSize,name:this.navList[this.current].name,sort:this.sortVal,lat:this.lat,lon:this.lon}).then(res =>{
					if(res.data.status == 200) {
						this.voucherList = this.voucherList.concat(res.data.data.list);
						this.areadyState = 1;
						if(res.data.data.list.length<this.pageSize){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else if(res.data.data.list.length==this.pageSize && this.page == res.data.data.pageCount){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else{
							this.status = 'loading';
							this.page = ++ this.page;
						}
					}
				})
			},
			bannerChange(e){
				this.bCurrent = e.detail.current;
			},
			// banner跳详情
			goBannerInfo(type,content){
				if(content!='' && content!=null){
					if(type==1){//文章
						uni.navigateTo({
							url: '/pages/index/newsDetail?id='+content
						});
					}else if(type==2){//url
						
					}else if(type==3){//商品
						uni.navigateTo({
							url: '/pages/index/goodsInfo?id='+content
						});
					}else if(type==4){//商铺
						uni.navigateTo({
							url: '/pages/publicPraise/storeInfo?id='+content+'&other=1'
						});
					}
				}
			},
			navChange(index){
				this.current = index;
				this.page = 1;
				this.voucherList = [];
				this.getVoucherList();
			},
			screenChange(e){
				this.sortVal = e;
				this.page = 1;
				this.voucherList = [];
				this.getVoucherList();
			},
			// 领取优惠券
			receiveCoupon(id){//fun​/coupon​/receive
				var _this = this;
				this.apiget('/fun/coupon/receive',{promotion_id:id}).then(res =>{
					if(res.data.status == 200 ) {
						if(res.data.message == 'SUCCESS'){
							uni.showToast({
								icon: 'success',
								duration:1000,
								title: '领取成功',
								success: res => {
									setTimeout(function (){
										_this.getStoreInfo();
									}, 1000);
								},
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.giftVoucher{
		min-height: 100%;
		background: #F8F8FA;
	}
	.topBox{
		position: relative;
		height: 438rpx;
		padding-top: 46rpx;
		background-color: #fff;
		.bj{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 180rpx;
			background: linear-gradient(270deg, #FF5238 0%, #FF7B51 100%);
		}
		.pd32{
			padding: 0 32rpx;
		}
		.activitySwiper{
			position: relative;
			z-index: 1;
			height: 200rpx;
			margin-bottom: 16rpx;
			border-radius: 16rpx;
			overflow: hidden;
			.swiper{
				width: 100%;
				height: 100%;
				.bannerImgBox{
					width: 100%;
					height: 100%;
					
					.banner {
						width: 100%;
						height: 100%;
					}
				}
			}
			.swiperDots {
				position: absolute;
				bottom: 8rpx;
				right: 0;
				width: 100%;
				padding-right: 28rpx;
				text-align: right;
				font-size: 0;
				
				.swiperDot{
					display: inline-block;
					width: 8rpx;
					height: 4rpx;
					margin: 0 4rpx;
					background: #FFFFFF;
					opacity: 0.4;
					border-radius: 24rpx;
				}
				
				.swiperDotActive{
					width: 16rpx;
					opacity: 1;
				}
			}
		}
		u-tabs{
			margin-top: 16rpx;
		}
		.u-tabs{
			box-shadow: inset 0px -0.5px 0px #F0F0F0;
		}
		.screen{
			display: flex;
			padding-top: 22rpx;
			font-size: 28rpx;
			line-height: 44rpx;
			text-align: center;
			color: #333333;
			.each{
				flex: 1;
				u-icon{
					margin-left: 8rpx;
				}
			}
			.eachEd{
				color: #FF5238;
			}
		}
	}
	.listBox{
		padding-bottom: 80rpx;
		.itemEach{
			margin-top: 24rpx;
			display: flex;
			background: #FFFFFF;
			.itemLeft{
				position: relative;
				padding: 24rpx;
				border-right: 2rpx dashed #E8E8E8;
				.leftBj{
					padding: 12rpx;
					border-radius: 4rpx;
					.leftCont{
						background: #FFFFFF;
						border-radius: 4rpx;
						width: 188rpx;
						.leftTopBox{
							position: relative;
							height: 56rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: bold;
							font-size: 24rpx;
							line-height: 56rpx;
							border-bottom: 1rpx dashed #FF5238;
							.shopLogo{
								width: 24rpx;
								height: 24rpx;
								margin-right: 4rpx;
								border-radius: 50%;
								overflow: hidden;
							}
						}
						.leftTopBox:before{
							position: absolute;
							content: '';
							left: -6rpx;
							bottom: -6rpx;
							width: 12rpx;
							height: 12rpx;
							background: #FF5238;
							border-radius: 50%;
						}
						.leftTopBox:after{
							position: absolute;
							content: '';
							right: -6rpx;
							bottom: -6rpx;
							width: 12rpx;
							height: 12rpx;
							background: #FF5238;
							border-radius: 50%;
						}
						.leftBottomBox{
							height: 132rpx;
							padding-top: 32rpx;
							text-align: center;
							.tips{
								margin-bottom: 16rpx;
								font-size: 20rpx;
								line-height: 20rpx;
								color: #333333;
							}
							.cont{
								font-weight: bold;
								font-size: 32rpx;
								line-height: 32rpx;
								color: #FF5238;
							}
						}
					}
				}
			}
			.itemLeft:before{
				position: absolute;
				content: '';
				right: -16rpx;
				top: -16rpx;
				width: 32rpx;
				height: 32rpx;
				background: #F8F8FA;
				border-radius: 50%;
			}
			.itemLeft:after{
				position: absolute;
				content: '';
				right: -16rpx;
				bottom: -16rpx;
				width: 32rpx;
				height: 32rpx;
				background: #F8F8FA;
				border-radius: 50%;
			}
			.itemRight{
				flex: 1;
				width: 1px;
				padding: 24rpx 32rpx 24rpx 24rpx;
				.cTit{
					margin-bottom: 8rpx;
					font-size: 28rpx;
					line-height: 44rpx;
					color: #333333;
				}
				.cont{
					margin-bottom: 16rpx;
					font-weight: bold;
					font-size: 36rpx;
					line-height: 52rpx;
					color: #FF5238;
				}
				.btnBox{
					text-align: right;
					.btn{
						display: inline-block;
						padding: 12rpx 24rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						background: #FF5238;
						border-radius: 30rpx;
					}
					.btn1{
						background: #b1acac;
					}
				}
			}
		}
	}
</style>
